﻿<!DOCTYPE html>
<html lang="zh-cn">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit|ie-stand|ie-comp" />
        <title>
            注册虎扑体育社区
        </title>
        <link rel="stylesheet" href="{{asset('/HomeCss/regist/css/reset.css')}}">
        <link rel="stylesheet" href="{{asset('/HomeCss/regist/css/passport.css')}}">
        <link rel="stylesheet" href="{{asset('/HomeCss/regist/css/passport-index.css')}}">
        <style type="text/css">
            .hidden{width:378px;height:23px;border:1px solid #F5D7D7;background-color:#F5D7D7;color:red;line-height:23px;display:none;}
        </style>
    </head>
    
    <body class="">
        <div class="bg-img">
            <img src="/HomeCss/regist/picture/bg.jpg" alt="">
        </div>
        <div class="user-login">
            
            <div class="back-title">
                <a href="#" id='back'>
                    <b>
                        返回上页
                    </b>
                            
                </a>
            </div>
            <div class="login-wrap">
                <div class="logo">
                    <img src="/HomeCss/regist/picture/logo.png" alt="">
                </div>
                <form action="{{url('/home/login/doregist')}}" class="common-form register-form" id="J_regForm" autocomplete="off"
                method="post">
                    <ul>
                        <li>
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="text" name="phone" placeholder="请输入大陆地区的手机号"
                                maxlength="11" data-rule="empty|phone" data-name="手机号" class="mobile">
                                <div class='hidden'>手机号不能为空</div>
                            </div>
                            
                        </li>
                        <li>
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="password" name="password" placeholder="请输入6-18位密码"
                                maxlength="11" data-rule="empty|phone" data-name="手机号" class="mobile">
                                <div class='hidden'>密码不能为空</div>
                            </div>
                            
                        </li>
                        <li class="clearfix" >
                            <div style='position:relative'>
                                <div class="ipt-wrap valicode-wrap fl" >
                                    <input autocomplete="off" type="text" placeholder="输入右侧验证码" name="code"
                                    class="authcode fl" maxlength="6" data-rule="empty|authcode" data-name="验证码" id="J_authcode">             
                                    <div class='hidden' style='position:absolute;left:0px;top:42px;margin-bottom:0px'>验证码不能为空</div>
                                </div>
                                <img src="/Vcode" alt="" class="vali-img fl" id="j_img">
                                <img src="/HomeCss/regist/images/refresh.png" style='position:absolute;left:340px;top:10px;cursor:pointer;transform:rotate(0deg)' id='refresh'>
                            </div>
                            
                            
                        </li>

                        <li class="clearfix">
                            <div class="ipt-wrap authcode-wrap fl">
                                <input autocomplete="off" type="text" class="msgcode" name="message"
                                placeholder="输入短信验证码" data-rule="empty|msgcode" data-name="短信验证码" maxlength="6">
                                <div class='hidden'>短信验证码不能为空</div>
                            </div>
                            <button type="button"  class="get-vercode fl" data-btn="短信发送中" >
                               获取短信验证码
                            </button>
                        </li>
                        <li>
                            <div class="protocol">
                                我已经阅读并同意
                                <a href="#" data-title="虎扑用户的协议" class="pop-box ">
                                    虎扑用户的协议
                                </a>
                            </div>
                        </li>
                        <li style='position:relative'>
                            {{csrf_field()}}
                            <input type="submit" class="reg-btn" id="J_register" value="注册">
                            <div class="login-method" style="position:absolute;left:0px;top:60px;">
                                <a href="#"
                                data-title="用QQ帐号登录" class="login-qq pop-box">
                                    QQ登录
                                </a>
                                <a href="{{url('/home/login/login/')}}"
                                class="login-phone">
                                    已有帐号，立即登录
                                </a>
                            </div>
                        </li>
                    </ul>
                </form>
                
            </div>
            
        </div>
        
    </div>

        <script src="{{asset('/HomeCss/regist/js/require.js')}}">
        </script>
        <script src="{{asset('/HomeCss/regist/js/jquery-1.8.3.min.js')}}"></script>
        
        <script type="text/javascript">
        <!-- 验证码刷新 -->
        //获取元素绑定单击事件
        var refresh=document.getElementById('refresh');
        var j_img=document.getElementById('j_img');
        refresh.onclick=function()
        {

            var d = 0;
            //启动定时器，旋转图片
            var inte = setInterval(function(){
                refresh.style.transform = 'rotate('+d+'deg)';
                d+=10;
                if(d > 360){
                    clearInterval(inte);
                }
            },10);
            //刷新页面
            j_img.src=j_img.src+'?a=1';
        }


        //返回上一页
        $('#back').click(function(){
            history.back();
            return false;
        });


        //表单验证
        //声明全局变量
        var PHONE = false;
        var CPASS = false;
        var CVODE = false;
        var MESSAGE = false;
        //绑定表单事件
        $('form').submit(function(){
            //触发所有的丧失焦点事件
            $('input').trigger('blur');
            //判断是否全部成功
            if(PHONE && CPASS && CVODE && MESSAGE){
                return true;
            }
            return false;
        });
        //给所有的字段绑定获取焦点事件
        $('input').focus(function(){
            //获取属性 提示信息
            var message = $(this).parent().find('.hidden').html();
        });
        //检查手机号
        $('input[name=phone]').blur(function(){
            //检查手机号是否为空
            if($(this).val() == ''){ 
                $(this).next().html('手机号不能为空').css('display','block');      
                return false;
            }else{
                $(this).next().css('display','none');
            }
            var phone=$(this).val();
            var inp=$(this);
            //判断输入的手机号是否符合要求
            var reg = /^1[3-8]\d{9}$/;
            if(!reg.test(phone)){
                $(this).next().html('手机号格式不正确').css('display','block');
                return false;
            }else{
                $(this).next().css('display','none');
            }
            //发送ajax判断手机号是否已注册
            $.get('/home/login/check',{phone:phone},function(data){
                // console.log(data);
                if(data==0){
                  PHONE = true;  
                }else{
                  inp.next().html('该手机号已注册').css('display','block');
                  return false;                  
                }
            });
        });
        
        //密码
        $('input[name=password]').blur(function(){
            //判断密码是否为空
            if($(this).val() == ''){ 
                $(this).next().html('密码不能为空').css('display','block');      
                return false;
            } 
            //判断输入密码是否符合要求
            var pass=$(this).val();
            var reg = /\w{6,18}/;       

            if(reg.test(pass)){
                $(this).next().css('display','none');
                CPASS = true;
            }else{
                $(this).next().html('密码格式不正确').css('display','block');
                return false;
            }
        });

        //验证码
        $('input[name=code]').blur(function(){
            var code=$(this).val();
            //判断验证码是否为空
            if($(this).val() == ''){ 
                $(this).next().html('验证码不能为空').css('display','block');      
                return false;
            } 
            var inp=$(this);
            //发送ajax
            $.get('/home/login/code',{code:code},function(data){
                if(data==1){
                    inp.next().css('display','none');
                    CVODE = true;
                }else{
                    inp.next().html('验证码不正确').css('display','block');
                    return false;
                }
            });

        });

    
        //短信发送中倒计时              
        $('.get-vercode').click(function(){
            $('input[name=message]').next().css('display','none');
            //获取输入的手机号
            var phone=$('input[name=phone]').val();
            if(PHONE && CPASS && CVODE)
            {
                var btn= $(this);
                var time=61;
                var inte=setInterval(function(){
                    btn.attr('disabled',true);
                    time--;
                    btn.html(time+'S后再次点击发送');
                    btn.css('background','gray');
                    if(time==0){
                        clearInterval(inte);
                        btn.attr('disabled',false);
                        btn.html('获取短信验证码');
                        btn.css('background','#E42837');
                    }
                 },1000);
                var message=$('input[name=message]').val();
                $.get('/home/login/message',{phone:phone},function(data){              
                    if (data == 1) {
                           return true; 
                    }else{
                        return false;
                    }
                });
            }else{
                $('input[name=message]').next().html('请完善以上信息').css('display','block');
            }
        });

         //短信验证码比对
         $('input[name=message]').blur(function(){
            var inp=$(this);
            //判断验证码是否为空
            if($(this).val() == ''){ 
                $(this).next().html('短信验证码不能为空').css('display','block');      
                return false;
            } 
            var codemessage = $(this).val();
            $.get('/home/login/yanzheng',{mcode:codemessage},function(data){
                if (data == 1) {
                    //验证成功
                    inp.next().css('display','none');
                    MESSAGE = true;
                }else{
                    //验证失败
                    inp.next().html('短信验证码不正确').css('display','block');
                    return false;
                }
            });
         });
         

        </script>
        <script>
            
        </script>
    </body>

</html>